<template>
	<view class="competionMsg">

		<view class="title">
			{{currentItem.projectName || ''}}
		</view>
		<uni-section title="报名时间：" type="line">
			<view class="example-name f16">
				<text class="number">{{currentItem.startTime || ''}}到 {{currentItem.endTime || ''}}</text>
			</view>
		</uni-section>
		<uni-section title="举办时间：" type="line">
			<view class="example-name f16">
				<text class="number">{{currentItem.projectStartTime || ''}}到 {{currentItem.projectEndTime || ''}}</text>
			</view>
		</uni-section>
		<uni-section title="发起学院：" type="line">
			<view class="example-name f16"> <text class="number">{{currentItem.createDepartment || ''}}</text></view>

		</uni-section>
		<uni-section title="比赛类型：" type="line">
			<view class="example-name f16"> <text class="number">{{instituteType || ''}}</text></view>

		</uni-section>
		<uni-section title="地点：" type="line">
			<view class="example-name f16"> <text class="number">{{currentItem.place || ''}}</text></view>

		</uni-section>
		<uni-section title="简介：" type="line">
			<view class="example-name f16"> <text>{{currentItem.briefly || ''}}</text></view>

		</uni-section>
		<uni-section title="内容：" type="line">
			<view class="example-name f16"> <text>{{currentItem.content || ''}}</text> </view>

		</uni-section>
		<uni-section title="规则：" type="line">
			<view class="example-name f16"> <text>{{currentItem.rule || ''}}</text></view>

		</uni-section>
		<uni-section title="奖励：" type="line">
			<view class="example-name f16"> <text>{{currentItem.reward || ''}}</text> </view>

		</uni-section>
		<uni-section title="标签：" type="line">
			<view class="example-name f16"> <text>{{currentItem.createDepartment || ''}}
				</text>
				<text>-{{instituteType || '' }}</text>
			</view>

		</uni-section>
		<uni-section title="加入方式：" type="line">
			<view class="example-name f16"> <text>{{currentItem.enterWay || ''}}</text></view>

		</uni-section>
		<uni-section title="比赛图片：" type="line">
			<view class="example-name f16" v-if="currentItem && currentItem.imgUrl.length !=0">
				<template v-for="(item,index) in currentItem.imgUrl">
					<view class="iamge" @click="showImage(index)">
						<image :src="item" mode="" style="width: 100%;height: 200rpx;"></image>
					</view>
				</template>
			</view>
			<view class="example-name f16" v-else>
				<text>暂无图片</text>
			</view>
		</uni-section>

		<view class="share">
			<button class="view-yuanjiao" hover-class="bg-click" @click="Collection"> 收藏 </button>
			<button class="view-yuanjiao" hover-class="bg-click" @click="Share" open-type="share"> 分享 </button>

		</view>
	</view>
</template>

<script>
	import {
		nextTick
	} from "vue";
	export default {
		name: 'competionMsg',
		data() {
			return {
				collected: false,
				currentItem: null,
				instituteType: '',
				imgList: []
			};
		},
		onShareAppMessage(res) {
			if (res.from === 'button') { // 来自页面内分享按钮
				console.log(res.target)

			}
			return {
				title: '分享给好友',
				path: '/pages/information/competionMsg/competionMsg'
			}
		},
		methods: {
			showImage(index) {
				const img = this.currentItem.imgUrl[index]
				const url = []
				url.push(img)
				wx.previewImage({
					urls: url, //需要预览的图片http链接列表，多张的时候，url直接写在后面就行了
					current: 1, // 当前显示图片的http链接，默认是第一个
					success: function(res) {},
					fail: function(res) {},
					complete: function(res) {},
				})

			},
			async Collection() {
				const projectId = this.currentItem.projectId
				console.log(projectId, 'projectId');
				const data = {
					projectId: String(projectId)
				}
				try {
					const result = await this.$mjcrequest.request({
						url: this.$api.addProjectFavourite,
						data: JSON.stringify(data),
						header: this.$aplsjsonheader,
						isToast: true
					});
					this.collected = true
				} catch (e) {
					this.$errMessageToast(e)
					this.collected = false
					//TODO handle the exception
				}

			},
			Share() {
				console.log('分享')
			}
		},
		onLoad() {

		},
		mounted() {
			this.$eventBus.$emit('competionMsg')
		},
		created() {
			this.$eventBus.$on('competionMsgSend', (item) => {
				console.log(item, 148);
				this.currentItem = item
				uni.setStorageSync('currentItem', item)
				this.$nextTick(() => {
					let instituteTypeDesc = ''
					switch (this.currentItem.instituteType) {
						case 0:
							instituteTypeDesc = '文科'
							break;
						case 1:
							instituteTypeDesc = '理科'
							break;
						case 2:
							instituteTypeDesc = '类型不限'
							break;

					}
					this.instituteType = instituteTypeDesc
				})
			})

		},
		destroyed() {

			this.$eventBus.$off('competionMsgSend')
		}
	}
</script>

<style lang="scss">
	.competionMsg {
		height: auto;
		width: 100%;
		background-color: #fff;
		box-sizing: border-box;
		overflow-x: hidden;
		padding: 30rpx 20rpx 55rpx 20rpx;

		.example-name {
			padding: 5px 10px;
		}

		.box {
			margin: 25rpx 0;
		}

		.erjiTitle {
			font-weight: 700;
			font-size: 40rpx;
		}

		.title {
			font-size: 60rpx;
			font-weight: 700;
			text-align: center;
		}

		.time {
			font-size: 35rpx;
			margin: 15rpx 0;

		}

		.introduction {
			& .iamge {
				width: 100%;
				height: 200rpx;
				border: 1px solid #ccc;
				border-radius: 15rpx;
				overflow: hidden;
				margin: 25rpx 0;

				& image {
					width: 100%;
					height: 100%;
					object-fit: cover;
					background-position-x: center;
					background-position-y: center;
					background-size: cover;
				}
			}
		}

		.tags {

			width: 750rpx;

		}

		.share {
			display: flex;
			justify-content: space-around;
			align-items: center;
			margin-top: 20px;

			.view-yuanjiao {

				width: 200rpx;
				height: 60rpx;
				display: flex;
				justify-content: center;
				border-radius: 25px;
				line-height: 60rpx;
				background-color: #007AFF;
			}

			.bg-click {
				top: 3upx;
				background-color: #a7a9ff;
			}


		}
	}
</style>
